﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" src=jquery-1.7.1.min.js></script>
    <script language="javascript">
        var pics=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg");
        $(document).ready(function () {
            $(".metro").each(function (i) {
                var images = new Array();
                for (var j = 0; j < pics.length; ++j) {
                    var image = document.createElement("img");
                    $(image).attr("src", pics[j]);
                    $(image).attr("width", 300);
                    $(image).attr("height", 220);
                    images.push(image);
                }
                $(this).attr("id", "metro" + i);
                setMetroStyleAnimation($(this).attr("id"), images, 10, Math.random()*10000+1000);
            });
        });

        function setMetroStyleAnimation(targetID,visiualSources,speed,delay)
        {
            var intervalID;
            var currentShowIndex = 0;
            prepare(targetID);
            function prepare(targetID) {
                var firstDiv = document.createElement("div");
                var secondDiv = document.createElement("div");
                var target = document.getElementById(targetID);
                $(firstDiv).attr("class", "animationDiv");
                $(secondDiv).attr("class", "animationDiv");

                $(firstDiv).css("width", $(target).css("width"));
                $(firstDiv).css("height", $(target).css("height"));
                $(secondDiv).css("width", $(target).css("width"));
                $(secondDiv).css("height", $(target).css("height"));

                $(firstDiv).css("margin-top", 0);
                $(secondDiv).css("margin-top", 0);


                $(firstDiv).empty();
                $(secondDiv).empty();
                $(firstDiv).append(visiualSources[currentShowIndex]);
                if(currentShowIndex+1>=visiualSources.length)
                    $(secondDiv).append(visiualSources[0]);
                else
                    $(secondDiv).append(visiualSources[currentShowIndex+1]);
                
                
                target.appendChild(firstDiv);
                target.appendChild(secondDiv);

                intervalID = setInterval(step, 20);
            }

            function step() {
                var swapDiv = false;
                var first = $("#" + targetID + " .animationDiv").first();
                var offset = parseInt(first.css("margin-top"));
                var height = parseInt(first.css("height"));
                offset += (height + offset + speed) / -speed;
                if (offset < -height) {
                    first.css("margin-top", height);
                    swapDiv = true;
                }
                first.css("margin-top", offset);
                if (swapDiv) {
                    currentShowIndex++;
                    if(currentShowIndex>=visiualSources.length)
                    {
                        currentShowIndex=0;
                    }
                    first.css("margin-top", 0);
                    $("#" + targetID).append(first.remove());
                    var firstDiv = $("#" + targetID+" .animationDiv")[0];
                    var secondDiv = $("#" + targetID + " .animationDiv")[1];
                    $(firstDiv).empty();
                    $(secondDiv).empty();
                    $(firstDiv).append(visiualSources[currentShowIndex]);
                    if(currentShowIndex+1>=visiualSources.length)
                        $(secondDiv).append(visiualSources[0]);
                    else
                        $(secondDiv).append(visiualSources[currentShowIndex+1]);
                    clearInterval(intervalID);
                    setTimeout(function () {
                        intervalID = setInterval(step, 20);
                    }, delay);
                }
            }
        }
    </script>
    <style type="text/css">
        .metro
        {
            margin:20px;
            width:300px;
            height:220px; 
            display:inline-block;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class="metro"></div>
    <div class="metro"></div>
    <div class="metro"></div>
    <div class="metro"></div>
    <div class="metro"></div>
    <div class="metro"></div>

</body>
</html>
